<template>
    <div class="root">
        <UserHeader/>
        <UserItem/>
        <UserList/>
    </div>
</template>

<script>
import UserItem from '@/components/UserItem.vue'
import UserList from '@/components/UserList.vue'
import UserHeader from '@/components/UserHeader.vue'
export default {
    name: "homeName",
    components: { UserHeader, UserItem, UserList },
    mounted() {
        this.$route.query.id
    },
}
</script>

<style>
body {
    background:rgb(253,250,242);
}
.root{
        margin: 4% 23%; 
        width: 800px;
        height: 600px;
        background-color: #ecbfd8;
        /* background-image:linear-gradient(45deg,#ee9ca7 0%, #ffdde1 100%); */
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 7px;
}
.btn-danger {
    color: #fff;
    height: 25px;
    background-color: #da4f49;
    border: 1px solid #bd362f;
    border-radius: 4px;
}
.btn-login{
    color: #fff;
    height: 25px;
    background-color: #da4f49;
    border: 1px solid #bd362f;
    border-radius: 4px;
    margin-right: 550px;
    /* float: left; */
}
.btn-time {
    color: #fff;
    height: 25px;
    background-color: skyblue;
    border: 1px solid rgb(90, 155, 180);
    border-radius: 4px;
    margin-right: 8px;
}
.btn-edit {
    color: #fff;
    height: 26px;
    background-color: skyblue;
    border: 1px solid rgb(90, 155, 180);
    margin-right: 5px;
    margin-top: 8px;
    border-radius: 4px;
}
.btn:focus {
    outline: none;
}

.todo-container {
    width: 600px;
    margin: 0 auto;
}
.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>